<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
  <style>
    /*
      v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

      v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，
      在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

      v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，
      在过渡或动画完成之后移除。

      v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

      v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，
      在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

      v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加
      (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
    */
    /* 下面我们会解释这些 class 是做什么的 */
    .my-enter-active,
    .my-leave-active {
      transition: opacity 5s ease;
      /* animation: ; */
    }

    .my-enter-from,
    .my-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id='app'>
    <button @click="show= !show">切换显示</button>

    <!--
      transition: 该组件是用来实现动画或者过渡用的，他会自动给元素添加 class
      name: 属性是设置 class 以什么开头
      appear 用来定义该动画或者过渡一运行就会立即执行动画过度
      如果需要同时操作多个元素的时候 transition 是有警告的
      会建议你去使用 transition-group 的组件
     -->
    <!-- <transition name="my" appear>
      <p v-if="show">你好</p>
    </transition> -->


    <!--
      transition-group 如果有多个标签需要做动画过渡，可以在外层添加一个元素，该方法不推荐
      我们可以使用 transition-group 来实现一组元素的动画或者过度
     -->
    <transition-group name="my" appear @before-enter="onBeforeEnter" @enter="onEnter">
      <p v-if="show">你好</p>
      <p v-if="show">中国</p>
    </transition-group>

    <box>
      <div>你笑起来真好看</div>
    </box>

    <box>
      <h1>像春天的花一样</h1>
    </box>


  </div>
</body>
<script>
  const app = Vue.createApp({
    data () {
      return {
        show: true
      }
    },
    methods: {
      onBeforeEnter () {
        console.log('动画执行之前');
      },
      onEnter () {
        console.log('动画执行');
      }
    },
  })

  app.component('box', {
    template: `<transition appear name="my"> <slot></slot> </transition>`
  })

  app.mount('#app')
</script>

</html>
